<template>
    <div class="integral">
        <tool-bar2 :names="names"></tool-bar2>

        <div class="content">
            <div class="bg-cover">
                <div class="top">
                    <p>我的积分</p>

                </div>
                <div class="bottom">
                    <p>{{defaultIntegral}}<span>ABNB</span></p>
                    <router-link to="/my/detail" tag="p">积分明细</router-link>
                </div>
            </div>
            <div class="box">
                <div class="title-box">
                    <span :class="tab===1?'active':''" @click="changeTab(1)">积分规则</span>
                    <span :class="tab===2?'active':''" @click="changeTab(2)">积分权益</span>
                </div>
                <div class="rule" v-if="tab===1">
                    <div class="list-item" v-for="(r,item) in rule" :key="item">
                        <div class="title">{{r.desc}}： </div>
                        <div class="text">{{r.content}}</div>
                    </div>
                </div>

                <div class="equity" v-if="tab===2">
                    <div class="list-item">
                        <span class="name">兑换服务</span>
                        <router-link tag="span" class="btn" to="/my/exchange">去兑换</router-link>
                    </div>
                    <div class="list-item">
                        <span class="name">兑换数字资产</span>
                        <router-link tag="span" class="btn" to="/my/exchange/number">去兑换</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ToolBar2 from "./ToolBar2";
    export default {
        name: "Integral",
        components: {ToolBar2},
        data(){
            return {
                names:'我的积分',
                tab:1,
                defaultIntegral:0,
                rule:[],


            }
        },

        mounted() {

            this.$api.my.getIntegral(this.getCookie('token')).then(res=> {
                // 执行某些操作
                this.defaultIntegral = res.data.data
            })
            this.$api.my.IntegralDesc(this.getCookie('token')).then(res=> {
                // 执行某些操作
                this.rule = res.data.data
            })

        },
        methods:{
            changeTab(type){
                this.tab = type
            }
        }
    }
</script>

<style scoped>
    .content{
        position: absolute;
        top: 3rem;
        left: 0;
        right: 0;
    }
    .bg-cover{
        width: 100%;
        height: 10.13rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        background: url("../../assets/img/bg_score.png") no-repeat;
        background-size:100% 100%;
        padding: 2rem 2rem 4rem 2rem;
    }
    .top{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .top p{
        width: 100%;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:1.13rem;
        opacity:0.8;
        text-align: left;
    }
    .bottom{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bottom p:first-child{
        font-size:1.75rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        display: flex;
        align-items: baseline;

    }
    .bottom p:first-child span{
        font-size: 0.84rem;
        font-weight: 500;
    }
    .bottom p:last-child{
        width:5rem;
        height:2rem;
        background:rgba(103,196,156,1);
        border-radius:0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .box{
        width:90%;
        height:30.22rem;
        background:rgba(255,255,255,1);
        margin: -3rem auto 0 auto;
    }
    .title-box{
        height: 4rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
    }
    .title-box span{
        display: inline-flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size:1rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding: 0 0.1rem;
    }
    .title-box span.active{
        color: #14A365;
        border-bottom: 1px solid #14A365;
    }
    .rule .list-item{
        width: 100%;
        margin: 1.5rem auto;
        border-bottom: 1px solid #eee;
    }
    .title{
        height: 0.88rem;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding-left: 0.5rem;
        border-left: 0.2rem solid #14A365;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .text{
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding:0.7rem;
        line-height: 1.13rem;
        text-align: left;
    }
    .equity .list-item{
        padding: 0 1rem;
        height: 4rem;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .name{
        font-size:1rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .btn{
        width:3.75rem;
        height:1.5rem;
        background:rgba(255,255,255,1);
        border:1px solid rgba(20,163,101,1);
        border-radius:0.1rem;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
</style>